<template>
  <div class="yzh-basic">
    <div class="flex justify-between pb-5">
      <TitleName
        title="产品记录"
        icon="i-carbon-bookmark-filled"
        class="title"
      ></TitleName
      ><!-- 
        :iconStyle="{ color: '#000' }" -->
      <div>
        产品记录数：<span class="text-blue-500"
          >{{ countCrudData.total }}条</span
        >
        产品总数：<span class="text-blue-500">{{ countCrudData.num }}</span
        >个 产品总售价：<span class="text-blue-500"
          >{{ countCrudData.totalActualPrice }}元</span
        >
        <!-- 整单折扣：<span class="text-blue-500"
          >{{ countCrudData.discount }}%</span
        > -->
        产品总金额：
        <span class="text-blue-500">{{ countCrudData.totalPrice }}元</span>
      </div>
    </div>
    <el-table :data="formData" stripe>
      <el-table-column prop="name" label="产品名称" width="200">
      </el-table-column>
      <el-table-column prop="number" label="产品编号" width="150">
      </el-table-column>
      <el-table-column prop="price" label="标准单价(元)" width="100">
      </el-table-column>
      <el-table-column prop="actualPrice" label="实际售价(元)" width="100">
      </el-table-column>
      <el-table-column prop="num" label="数量" width="50"> </el-table-column>
      <!-- <el-table-column prop="discount" label="折扣(%)" width="80">
      </el-table-column> -->
      <el-table-column prop="totalPrice" label="总价(元)" width="100">
      </el-table-column>
      <el-table-column prop="unit" label="产品规格" width="80">
        <template #default="scope">
          <dict-drop
            :options="measurement_unit"
            :value="scope.row.unit"
            :isDrop="false"
        /></template>
      </el-table-column>
      <el-table-column prop="serviceDateArr" label="服务时间" width="230">
        <template #default="scope">
          <div>
            <div v-if="scope.row.$cellEdit">
              <el-date-picker
                :clearable="true"
                style="width: 100%"
                v-model="scope.row.serviceDateArr"
                type="daterange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </div>
            <div v-else>
              {{ strToArr(scope.row.serviceDateArr).toString() }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="present" label="赠品" width="150">
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="150">
      </el-table-column>
      <el-table-column prop="specification" label="规格型号" width="100">
      </el-table-column>
      <el-table-column prop="extensionNo" label="分机号" width="100">
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <div>
            <el-button
              link
              v-if="!scope.row.$cellEdit"
              type="primary"
              @click="rowEdit(scope.row)"
              >编辑</el-button
            >
            <el-button v-else link type="primary" @click="rowSave(scope.row)"
              >保存</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <div
      class="flex justify-between pt-5"
      v-if="industry[tableParam.businessType]"
    >
      <TitleName
        :title="industry[tableParam.businessType].name"
        icon="i-carbon-bookmark-filled"
        class="title"
      ></TitleName>
    </div>
    <div>
      <div v-if="industry[tableParam.businessType]">
        <avue-crud
          :option="
            crudOptionBusiness[
              `${industry[tableParam.businessType].field}Option`
            ]
          "
          :data="industryData"
          class="hide-required-asterisk"
        >
          <template #empty>
            <div>暂无数据</div>
          </template>
        </avue-crud>
      </div>
    </div>
  </div>
</template>
<script setup name="OrderProduct">
import { reactive, toRefs, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import useCommonStore from '@/store/modules/common'
import {
  yes_or_no, //是否
  measurement_unit, //产品单位
  order_hierarchy, //层次
  improve_form, //提升形式
  order_library, //培训产业继续教育所属库
  library_status, //入库情况
  online_offline, //线上/线下
  enter_date, //入学时间
  certificateName // 报考证书名称
} from '@/hooks/dict/order'
import {
  getProductCount,
  getProductList,
  getIndustryList,
  updateServiceDate
} from '@/api/indentManage/indent'
import { strToArr } from '@/utils/commo'

// 子表公用配置
const crudOption = {
  header: false,
  menu: false,
  menuFixed: 'right',
  delBtn: false,
  editBtn: false,
  addBtn: false,
  addRowBtn: false,
  saveBtn: false,
  cancelBtn: false,
  cellBtn: false,
  // searchBtn: false,
  refreshBtn: false,
  columnBtn: false,
  menuWidth: 100,
  border: true
}
// 培训产业配置
const industry = {
  '培训产业-继续教育': { name: '继续教育', field: 'continuingEducation' },
  '培训产业-会员': { name: '会员', field: 'member' },
  '培训产业-证书': { name: '证书', field: 'certificate' },
  '培训产业-单课程': { name: '单课程', field: 'course' },
  '培训产业-学历提升': { name: '学历提升', field: 'educationPromotion' },
  '培训产业-1+X': { name: '1+X', field: 'onex' }
}

const router = useRouter()
const route = useRoute()
const props = defineProps({
  orderId: {
    type: [Number, String],
    require: true
  },
  tableParam: {
    type: Object,
    require: false
  }
})
const { proxy } = getCurrentInstance()
const commonStore = useCommonStore()
const sortOptions = ref([])
const companyData = ref([])
commonStore.getCompanyData().then(e => {
  companyData.value = e
})
const data = reactive({
  formData: [],
  countCrudData: {
    num: '-', //产品总数量
    total: '-', //产品记录数量
    totalActualPrice: '-', //产品总实际金额
    discount: '-', //整单折扣
    totalPrice: '-' //产品总金额
  },
  total: 0,
  queryParams: {
    pageNum: 1,
    pageSize: 10
  },

  industryData: [],
  crudOptionBusiness: {
    /* 继续教育列表配置 */
    continuingEducationOption: {
      ...crudOption,
      column: [
        {
          label: '客户名称',
          prop: 'contactName',
          fixed: true,
          cell: true,
          minWidth: '150',
          rules: [
            {
              required: true,
              message: '请输入客户名称',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '身份证号码',
          prop: 'idNumber',
          minWidth: '200',
          cell: true,
          rules: [
            {
              required: true,
              message: '请输入身份证号码',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '办理年份',
          prop: 'transactYear',
          type: 'year',
          format: 'YYYY',
          valueFormat: 'YYYY',
          cell: true,
          minWidth: '150'
        },
        {
          label: '电话号码',
          prop: 'contactNumber',
          cell: true,
          width: '150',
          rules: [
            {
              required: true,
              message: '请输入电话号码',
              trigger: 'blur'
            }
          ]
        },
        // {
        //   label: '学历层次',
        //   prop: 'hierarchy',
        //   type: 'select',
        //   minWidth: '150',
        //   dicData: order_hierarchy,
        //   cell: true
        // },
        // {
        //   label: '提升形式',
        //   prop: 'improveForm',
        //   type: 'select',
        //   minWidth: '150',
        //   dicData: improve_form,
        //   cell: true
        // },
        // {
        //   label: '报考学校',
        //   prop: 'applySchool',
        //   cell: true,
        //   width: '150',
        //   rules: [
        //     {
        //       required: false,
        //       message: '请输入报考学校',
        //       trigger: 'blur'
        //     }
        //   ]
        // },
        // {
        //   label: '报考专业',
        //   prop: 'applyMajor',
        //   cell: true,
        //   width: '150',
        //   rules: [
        //     {
        //       required: false,
        //       message: '请输入报考专业',
        //       trigger: 'blur'
        //     }
        //   ]
        // },
        {
          label: '入库情况',
          prop: 'libraryStatus',
          type: 'select',
          minWidth: '150',
          dicData: library_status,
          cell: true
        },
        {
          label: '所属库',
          prop: 'library',
          type: 'select',
          minWidth: '150',
          dicData: order_library,
          cell: true
        },
        {
          label: '备注',
          prop: 'remark',
          // type: 'textarea',
          // maxRows: 1,
          rules: [
            {
              required: false,
              message: '请输入备注',
              trigger: 'blur'
            }
          ],
          cell: true
        }
      ]
    },
    /* 会员列表配置 */
    memberOption: {
      ...crudOption,
      column: [
        {
          label: '客户名称',
          prop: 'contactName',
          fixed: true,
          cell: true,
          minWidth: '150',
          rules: [
            {
              required: true,
              message: '请输入客户名称',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '电话号码',
          prop: 'contactNumber',
          cell: true,
          minWidth: '150',
          rules: [
            {
              required: true,
              message: '请输入电话号码',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '会员等级',
          prop: 'membershipLevel',
          // type: 'select',
          minWidth: '200',
          // dicData: membership_level,
          cell: true
        },
        // {
        //   label: '权益内容',
        //   prop: 'equityContent',
        //   cell: true,
        //   minWidth: '150'
        // },
        {
          label: '首次购买服务时间',
          prop: 'firstDate',
          type: 'date',
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
          cell: true,
          minWidth: '150'
        },
        {
          label: '服务时间',
          prop: 'serviceDateArr',
          type: 'daterange',
          class: 'daterangeClass',
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
          startPlaceholder: '开始时间',
          endPlaceholder: '结束时间',
          cell: true,
          minWidth: '240'
        },
        {
          label: '线上权益是否开通',
          prop: 'isActivate',
          type: 'select',
          minWidth: '130',
          dicData: yes_or_no,
          cell: true
        },
        {
          label: '教材赠送',
          prop: 'sendTextbook',
          cell: true,
          minWidth: '150'
        },
        {
          label: '微信昵称',
          prop: 'wechatNickname',
          cell: true,
          minWidth: '150'
        },
        {
          label: '所在群',
          prop: 'groupChat',
          cell: true,
          minWidth: '150'
        },
        {
          label: '听课情况',
          prop: 'lectureSituation',
          cell: true,
          minWidth: '150'
        },
        {
          label: '备注',
          prop: 'remark',
          // type: 'textarea',
          // maxRows: 1,
          rules: [
            {
              required: false,
              message: '请输入备注',
              trigger: 'blur'
            }
          ],
          cell: true
        }
      ]
    },
    /* 证书列表配置 */
    certificateOption: {
      ...crudOption,
      column: [
        {
          label: '客户名称',
          prop: 'contactName',
          fixed: true,
          cell: true,
          minWidth: '150',
          rules: [
            {
              required: true,
              message: '请输入客户名称',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '身份证号码',
          prop: 'idNumber',
          minWidth: '200',
          cell: true,
          rules: [
            {
              required: true,
              message: '请输入身份证号码',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '电话号码',
          prop: 'contactNumber',
          placeholder: '请输入电话号码',
          cell: true,
          minWidth: '150',
          rules: [
            {
              required: true,
              message: '请输入电话号码',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '报考证书名称',
          prop: 'certificateName',
          type: 'tree',
          minWidth: '150',
          dicData: certificateName,
          cell: true
        },
        {
          label: '培训服务时间',
          prop: 'trainServiceDateArr',
          type: 'daterange',
          class: 'daterangeClass',
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
          startPlaceholder: '开始时间',
          endPlaceholder: '结束时间',
          cell: true,
          minWidth: '240'
        },
        {
          label: '收件地址',
          prop: 'address',
          cell: true,
          minWidth: '150'
        },
        {
          label: '备注',
          prop: 'remark',
          // type: 'textarea',
          // maxRows: 1,
          rules: [
            {
              required: false,
              message: '请输入备注',
              trigger: 'blur'
            }
          ],
          cell: true
        }
      ]
    },
    /* 单课程列表配置 */
    courseOption: {
      ...crudOption,
      column: [
        {
          label: '客户名称',
          prop: 'contactName',
          fixed: true,
          cell: true,
          minWidth: '150',
          rules: [
            {
              required: true,
              message: '请输入客户名称',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '电话号码',
          prop: 'contactNumber',
          cell: true,
          minWidth: '150',
          rules: [
            {
              required: true,
              message: '请输入电话号码',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '课程名称',
          prop: 'courseName',
          cell: true,
          minWidth: '150'
        },
        {
          label: '线上/线下',
          prop: 'onlineOffline',
          type: 'select',
          minWidth: '130',
          dicData: online_offline,
          cell: true
        },
        {
          label: '备注',
          prop: 'remark',
          rules: [
            {
              required: false,
              message: '请输入备注',
              trigger: 'blur'
            }
          ],
          cell: true
        }
      ]
    },
    /* 学历提升列表配置 */
    educationPromotionOption: {
      ...crudOption,
      column: [
        {
          label: '客户名称',
          prop: 'contactName',
          fixed: true,
          cell: true,
          minWidth: '150',
          rules: [
            {
              required: true,
              message: '请输入客户名称',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '身份证号码',
          prop: 'idNumber',
          minWidth: '200',
          cell: true,
          rules: [
            {
              required: true,
              message: '请输入身份证号码',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '电话号码',
          prop: 'contactNumber',
          cell: true,
          width: '150',
          rules: [
            {
              required: true,
              message: '请输入电话号码',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '学历层次',
          prop: 'hierarchy',
          type: 'select',
          minWidth: '150',
          dicData: order_hierarchy,
          cell: true
        },
        {
          label: '提升形式',
          prop: 'improveForm',
          type: 'select',
          minWidth: '150',
          dicData: improve_form,
          cell: true
        },
        {
          label: '报考学校',
          prop: 'applySchool',
          cell: true,
          width: '150',
          rules: [
            {
              required: false,
              message: '请输入报考学校',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '报考专业',
          prop: 'applyMajor',
          cell: true,
          width: '150',
          rules: [
            {
              required: false,
              message: '请输入报考专业',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '服务时间',
          prop: 'serviceDateArr',
          type: 'daterange',
          class: 'daterangeClass',
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
          startPlaceholder: '开始时间',
          endPlaceholder: '结束时间',
          cell: true,
          minWidth: '240'
        },
        {
          label: '报名时间',
          prop: 'registerDate',
          type: 'date',
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
          cell: true,
          minWidth: '150'
        },
        {
          label: '入学时间',
          prop: 'enterDate',
          type: 'select',
          minWidth: '150',
          dicData: enter_date,
          cell: true
        },
        {
          label: '备注',
          prop: 'remark',
          // type: 'textarea',
          // maxRows: 1,
          rules: [
            {
              required: false,
              message: '请输入备注',
              trigger: 'blur'
            }
          ],
          cell: true
        }
      ]
    },
    /* 1+X列表配置 */
    onexOption: {
      ...crudOption,
      column: [
        {
          label: '院校名称',
          prop: 'collegeName',
          minWidth: '200',
          cell: true,
          rules: [
            {
              required: true,
              message: '请输入院校名称',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '院校税号',
          prop: 'collegeTaxcode',
          minWidth: '200',
          cell: true,
          rules: [
            {
              required: true,
              message: '请输入院校税号',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '联系人',
          prop: 'contactName',
          cell: true,
          width: '150',
          rules: [
            {
              required: false,
              message: '请输入联系人',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '联系电话',
          prop: 'contactNumber',
          cell: true,
          width: '150',
          rules: [
            {
              required: false,
              message: '请输入联系电话',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '考试人数 ',
          prop: 'examNum',
          cell: true,
          width: '150',
          rules: [
            {
              required: false,
              message: '请输入考试人数 ',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '单价 ',
          prop: 'unitPrice',
          type: 'number',
          min: 0,
          class: 'w-full',
          width: '90',
          controls: false,
          rules: [
            {
              required: false,
              message: '请输入单价 ',
              trigger: 'blur'
            }
          ],
          cell: true
        },
        {
          label: '金额',
          prop: 'amount',
          type: 'number',
          min: 0,
          class: 'w-full',
          width: '90',
          controls: false,
          rules: [
            {
              required: false,
              message: '请输入金额',
              trigger: 'blur'
            }
          ],
          cell: true
        },
        {
          label: '考试时间',
          prop: 'examDate',
          type: 'date',
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
          cell: true,
          minWidth: '150'
        },
        {
          label: '备注',
          prop: 'remark',
          // type: 'textarea',
          // maxRows: 1,
          rules: [
            {
              required: false,
              message: '请输入备注',
              trigger: 'blur'
            }
          ],
          cell: true
        }
      ]
    }
  } //培训业务分类子表配置
})
let {
  formData,
  countCrudData,
  total,
  queryParams,
  industryData,
  crudOptionBusiness
} = toRefs(data)

watchEffect(() => {
  if (props.orderId) {
    getFormData(props.orderId)
    getIndustry()
  }
})
// 获取表单信息
function getFormData(id) {
  getProductCount(id).then(async res => {
    let resData = {}
    resData = res.data
    countCrudData.value = resData
    console.log('countCrudData.value==>', countCrudData.value)
  })
  getList()
}
function getList() {
  let query = {
    ...queryParams.value,
    orderId: props.orderId
  }
  getProductList(query).then(async res => {
    let resData = {}
    resData = res.rows
    total.value = res.total
    formData.value = resData.map(item => {
      return { ...item, $cellEdit: false }
    })
    console.log('formData.value==>', formData.value)
  })
}
function getIndustry() {
  let query = {
    orderId: props.orderId
  }
  getIndustryList(query).then(async res => {
    industryData.value = res.data
  })
}

// 产品编辑行
const rowEdit = row => {
  row.$cellEdit = true
}
// 保存行
const rowSave = row => {
  row.$cellEdit = false
  updateServiceDate(row).then(res => {
    if (res.code == 200) {
      // console.log('res.code===>', res)
      getList()
    }
  })
  // console.log('保存行===>', row)
}
</script>
<style lang="scss" scoped>
.title {
  font-size: 16px;
  font-weight: 600;
}

:deep(.hide-required-asterisk) {
  .avue-crud__body {
    .el-card__body {
      padding: 15px 0 !important;
    }
  }
}
</style>
